<!doctype html>
<html>
<head>

  <title>dom-repeat</title>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <script src="../../../perf-lib/perf.js"></script>
  <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
  <!-- <link rel="import" href="../../polymer-debug.html"> -->
  <link rel="import" href="../../polymer.html">
  <link rel="import" href="../../../layout/layout.html">
  <!-- <link rel="import" href="../../src/lib/experimental/observe-js-behavior.html"> -->

</head>
<body>

<style>
  body {
    font-family: sans-serif;
    font-size: 14px;
  }
</style>

<dom-module id="x-labeled-input">
  <style>
    :host {
      width: 400px
    }
    #label {
      width: 200px;
      overflow: hidden;
      border-bottom: 1px solid gray;
      border-bottom-style: dashed;
    }
    input {
      margin-right: 5px;
    }
  </style>
  <template>
    <div class="layout horizontal">
      <span id="label" class="flex">{{label}}</span>
      <input value="{{value::input}}" disabled$="{{disabled}}">
    </div>
  </template>
</dom-module>

<dom-module id="x-observe">
  <template><div>{{items.0.items}}</div></template>
</dom-module>

<dom-module id="x-test">
  <style>
    .outer {
      padding: 10px;
    }
    .column {
      width: 400px;
      overflow: auto;
    }
    .item {
      margin: 5px;
      margin-left: 10px;
      margin-right: 0;
      padding: 5px;
      padding-right: 0;
      background-color: rgba(0,0,0,0.1);
    }
    .index {
      display: inline-block;
      background-color: gray;
      color: white;
      padding: 4px;
      margin-bottom: 4px;
      border-radius: 4px;
    }
  </style>
  <template>

    <!-- <x-observe items="{{items}}"></x-observe> -->

    <div class="fit layout vertical">

      <div class="outer">
        <div>{{a.b.c}}</div>
        <div class="index">Outer scope:</div>
        <x-labeled-input label="outerA" value="{{outerA}}"></x-labeled-input>
        <x-labeled-input label="outerB" value="{{outerB}}"></x-labeled-input>
        <x-labeled-input label="outerC" value="{{outerC}}"></x-labeled-input>
        <x-labeled-input label="outerObjA.value" value="{{outerObjA.value}}"></x-labeled-input>
        <x-labeled-input label="outerObjB.value" value="{{outerObjB.value}}"></x-labeled-input>
        <x-labeled-input label="outerObjC.value" value="{{outerObjC.value}}"></x-labeled-input>
        <x-labeled-input label="outerObjD.value" value="{{outerObjD.value}}"></x-labeled-input>
      </div>

      <div class="layout horizontal flex">

        <div class="column flex">
          <template is="dom-repeat" id="xr1-1" items="{{items}}" as="itemA" inner-as="inner">
            <div class="item" id="xr1-1" idx$="{{index}}">
              <div class="index">idx: <span>{{index}}</span></div>
              <button on-click="changeOuterA">Change outerA</button>
              <button on-click="changeItemName">Change itemA.name</button>
              <x-labeled-input label="itemA.name" value="{{itemA.name}}"></x-labeled-input>
              <x-labeled-input label="outerA" value="{{outerA}}"></x-labeled-input>
              <x-labeled-input label="outerObjA.value" value="{{outerObjA.value}}"></x-labeled-input>
              <x-labeled-input label="computeConcat(itemA.name, outerObjD.value)" value="{{computeConcat(itemA.name, outerObjD.value)}}" disabled></x-labeled-input>
              <template is="dom-repeat" id="xr1-2" idx$="{{index}}" items="{{itemA.items}}" as="itemB">
                <div class="item" id="xr1-2" idx$="{{index}}">
                  <div class="index">idx: <span>{{index}}</span></div>
                  <button on-click="changeOuterB">Change outerB</button>
                  <button on-click="changeItemName">Change itemA.name</button>
                  <x-labeled-input label="itemB.name" value="{{itemB.name}}"></x-labeled-input>
                  <x-labeled-input label="itemA.name" value="{{itemA.name}}"></x-labeled-input>
                  <x-labeled-input label="outerB" value="{{outerB}}"></x-labeled-input>
                  <x-labeled-input label="outerObjB.value" value="{{outerObjB.value}}"></x-labeled-input>
                  <x-labeled-input label="computeConcat(itemB.name, outerObjB.value)" value="{{computeConcat(itemB.name, outerObjB.value)}}" disabled></x-labeled-input>
                  <template is="dom-repeat" id="xr1-3" idx$="{{index}}" items="{{itemB.items}}" as="itemC">
                    <div class="item" id="xr1-3" idx$="{{index}}">
                      <div class="index">idx: <span>{{index}}</span></div>
                      <button on-click="changeOuterC">Change outerC</button>
                      <button on-click="changeItemName">Change itemA.name</button>
                      <x-labeled-input label="itemC.name" value="{{itemC.name}}"></x-labeled-input>
                      <x-labeled-input label="itemB.name" value="{{itemB.name}}"></x-labeled-input>
                      <x-labeled-input label="itemA.name" value="{{itemA.name}}"></x-labeled-input>
                      <x-labeled-input label="outerC" value="{{outerC}}"></x-labeled-input>
                      <x-labeled-input label="outerObjC.value" value="{{outerObjC.value}}"></x-labeled-input>
                      <x-labeled-input label="computeConcat(itemC.name, outerObjC.value)" value="{{computeConcat(itemC.name, outerObjC.value)}}" disabled></x-labeled-input>
                    </div>
                  </template>
                </template>
              </div>
            </div>
          </template>
        </div>

        <div class="column flex">
          <template is="dom-repeat" id="xr2-1" items="{{items}}" as="itemA" inner-as="inner">
            <div class="item" id="xr2-1" idx$="{{index}}">
              <div class="index">idx: <span>{{index}}</span></div>
              <button on-click="changeOuterA">Change outerA</button>
              <button on-click="changeItemName">Change itemA.name</button>
              <x-labeled-input label="itemA.name" value="{{itemA.name}}"></x-labeled-input>
              <x-labeled-input label="outerA" value="{{outerA}}"></x-labeled-input>
              <x-labeled-input label="outerObjA.value" value="{{outerObjA.value}}"></x-labeled-input>
              <x-labeled-input label="computeConcat(itemA.name, outerObjD.value)" value="{{computeConcat(itemA.name, outerObjD.value)}}" disabled></x-labeled-input>
              <template is="dom-repeat" id="xr2-2" idx$="{{index}}" items="{{itemA.items}}" as="itemB">
                <div class="item" id="xr2-2" idx$="{{index}}">
                  <div class="index">idx: <span>{{index}}</span></div>
                  <button on-click="changeOuterB">Change outerB</button>
                  <button on-click="changeItemName">Change itemA.name</button>
                  <x-labeled-input label="itemB.name" value="{{itemB.name}}"></x-labeled-input>
                  <x-labeled-input label="itemA.name" value="{{itemA.name}}"></x-labeled-input>
                  <x-labeled-input label="outerB" value="{{outerB}}"></x-labeled-input>
                  <x-labeled-input label="outerObjB.value" value="{{outerObjB.value}}"></x-labeled-input>
                  <x-labeled-input label="computeConcat(itemB.name, outerObjB.value)" value="{{computeConcat(itemB.name, outerObjB.value)}}" disabled></x-labeled-input>
                  <template is="dom-repeat" id="xr2-3" idx$="{{index}}" items="{{itemB.items}}" as="itemC">
                    <div class="item" id="xr2-3" idx$="{{index}}">
                      <div class="index">idx: <span>{{index}}</span></div>
                      <button on-click="changeOuterC">Change outerC</button>
                      <button on-click="changeItemName">Change itemA.name</button>
                      <x-labeled-input label="itemC.name" value="{{itemC.name}}"></x-labeled-input>
                      <x-labeled-input label="itemB.name" value="{{itemB.name}}"></x-labeled-input>
                      <x-labeled-input label="itemA.name" value="{{itemA.name}}"></x-labeled-input>
                      <x-labeled-input label="outerC" value="{{outerC}}"></x-labeled-input>
                      <x-labeled-input label="outerObjC.value" value="{{outerObjC.value}}"></x-labeled-input>
                      <x-labeled-input label="computeConcat(itemC.name, outerObjC.value)" value="{{computeConcat(itemC.name, outerObjC.value)}}" disabled></x-labeled-input>
                    </div>
                  </template>
                </template>
              </div>
            </div>
          </template>
        </div>

      </div>

    </div>

  </template>
</dom-module>

<script>
  HTMLImports.whenReady(function() {

    Polymer ({
      is: 'x-labeled-input',
      properties: {
        value: {
          notify: true
        },
        label: String,
        disabled: Boolean
      }
    });

    Polymer ({
      is: 'x-observe',
      // behaviors: [
      //   Polymer.ObserveJsBehavior
      // ],
      observers: [
        'log(items.0.items.*)'
      ],
      log: function(change) {
        console.log(change);
      }
    });

    Polymer ({
      is: 'x-test',

      // behaviors: [
      //   Polymer.ObserveJsBehavior
      // ],

      observers: [
        'logStuff(outerObjA.*)'
      ],

      logStuff: function(change) {
        console.log(change);
      },

      properties: {
        items: {
          value: function() {
            return [
              {name: 'item 1', items: [
                {name: 'item 1-1', items: [
                  {name: 'item 1-1-1'},
                  {name: 'item 1-1-2'},
                  {name: 'item 1-1-3'}
                ]},
                {name: 'item 1-2', items: [
                  {name: 'item 1-2-1'},
                  {name: 'item 1-2-2'},
                  {name: 'item 1-2-3'}
                ]},
                {name: 'item 1-3', items: [
                  {name: 'item 1-3-1'},
                  {name: 'item 1-3-2'},
                  {name: 'item 1-3-3'}
                ]}
              ]},
              {name: 'item 2', items: [
                {name: 'item 2-1', items: [
                  {name: 'item 2-1-1'},
                  {name: 'item 2-1-2'},
                  {name: 'item 2-1-3'}
                ]},
                {name: 'item 2-2', items: [
                  {name: 'item 2-2-1'},
                  {name: 'item 2-2-2'},
                  {name: 'item 2-2-3'}
                ]},
                {name: 'item 2-3', items: [
                  {name: 'item 2-3-1'},
                  {name: 'item 2-3-2'},
                  {name: 'item 2-3-3'}
                ]}
              ]},
              {name: 'item 3', items: [
                {name: 'item 3-1', items: [
                  {name: 'item 3-1-1'},
                  {name: 'item 3-1-2'},
                  {name: 'item 3-1-3'}
                ]},
                {name: 'item 3-2', items: [
                  {name: 'item 3-2-1'},
                  {name: 'item 3-2-2'},
                  {name: 'item 3-2-3'}
                ]},
                {name: 'item 3-3', items: [
                  {name: 'item 3-3-1'},
                  {name: 'item 3-3-2'},
                  {name: 'item 3-3-3'}
                ]},
              ]}
            ];
          }
        },
        outerA: {
          value: 'outerA'
        },
        outerB: {
          value: 'outerB'
        },
        outerC: {
          value: 'outerC'
        },
        outerObjA: {
          value: function() { return { value: 'outerObjA.value' }; }
        },
        outerObjB: {
          value: function() { return { value: 'outerObjB.value' }; }
        },
        outerObjC: {
          value: function() { return { value: 'outerObjC.value' }; }
        },
        outerObjD: {
          value: function() { return { value: 'outerObjD.value' }; }
        }
      },
      changeOuterA: function() {
        this.outerA = this.outerA + 'A';
      },
      changeOuterB: function() {
        this.outerB = this.outerB + 'B';
      },
      changeOuterC: function() {
        this.outerC = this.outerC + 'C';
      },
      changeItemName: function(e) {
        prop = e.model.itemA ? 'itemA.name' : (e.model.itemB ? 'itemB.name' : 'itemC.name');
        e.model.set(prop, e.model.get(prop) + '*');
      },
      computeConcat: function(a, b) {
        return a + ' - ' + b;
      }
    });

  });
</script>

<script>console.perf && console.perf();</script>

<x-test class="fit"></x-test>

<script>setTimeout(function() { console.perf && console.perfEnd(); });</script>
